Frontend Development with React

Prerequisite

Completed Web Development (HTML, CSS, JavaScript) and strong understanding of frontend basics

Course Description

Master one of the most popular libraries in frontend development. Learn to create powerful and dynamic user interfaces using React, focusing on UI/UX best practices.

What you will learn

• - Build rich frontend applications with React
• - Manage component states and properties
• - Use Hooks and Redux for advanced features
• - Connect React apps to backend servers
• - Test React components and build a final project portfolio

Course Outline

• Week 1 Introduction to Frontend Development & React Basics

  • Course introduction, syllabus overview, and learning objectives
  • Introduction to frontend development and its importance
  • Setting up the development environment: text editor, Node.js, npm
  • Introduction to React: what it is, component-based architecture
  • Creating a basic React app: components, props, and state

• Week 2

  • JSX syntax: mixing HTML and JavaScript in React
  • Handling events and user interactions in React
  • React component lifecycle: mounting, updating, unmounting
  • Introduction to state management and handling state changes.

• Week 3 Advanced React Concepts

  • React Router: navigation and routing in a React app
  • Forms and controlled components in React
  • Using conditional rendering and dynamic data in components.

• Week 4

  • Context API and state management without external libraries
  • Introduction to UI libraries and frameworks (e.g., Material-UI)
  • Assignment 1: Building a multi-page React app with navigation.

• Week 5 Introduction to UI Frameworks (e.g., Tailwind CSS)

  • Understanding the concept of UI frameworks and their benefits
  • Introduction to Tailwind CSS: utility-first approach and classes
  • Building responsive layouts with Tailwind CSS.

• Week 6

  • Styling with Tailwind CSS: typography, colors, spacing, and borders
  • Customizing Tailwind CSS using configuration files
  • Assignment 2: Creating a responsive webpage using Tailwind CSS.

• Week 7 Integrating Tailwind CSS with React

  • Setting up Tailwind CSS with React using various methods
  • Building components with Tailwind CSS classes
  • Using conditional styling and dynamic class generation.

• Week 8

  • Styling best practices when combining React and Tailwind CSS
  • Introduction to utility classes for responsiveness
  • Quiz 1: Assessing React and Tailwind CSS knowledge.

• Week 9 Advanced React & State Management

  • State management with Redux: concepts, actions, reducers, store
  • Implementing Redux in a React app for global state management.

• Week 10

  • Asynchronous operations in React: handling APIs and data fetching
  • Introduction to React hooks: use State, use Effect, custom hooks
  • Assignment 3: Developing a Redux-powered React application.

• Week 11 Project Development

  • Students work on a project that combines React, Tailwind CSS, and Redux (optional)
  • Project topic could involve creating a dynamic web application or dashboard
  • Weekly check-ins to monitor progress and provide guidance.

• Week 12 Finalization and Assessment

  • Finalizing the project and addressing any remaining issues
  • Project presentations: students showcase their projects and explain their design choices
  • Introduction to deployment: hosting React apps and considerations
  • Assignment 4: Reflective essay on the learning journey
  • Quiz 2: Comprehensive assessment of the course content.

Grading Criteria

Particulars	Marks (%)
Quizzes	20
Class Participation/ Attendance	15
Projects	25
Final Projects	40
Total	100